<template>
  <div class="articleManage_main">
    <div class="sx">
      <div>
        <span>文章名称：</span>
        <el-input clearable v-model="articleSX.title" placeholder="请输入文章名称" style="width: 200px"/>
        <span style="margin-left: 10px">是否置顶：</span>
        <el-select v-model="articleSX.isVip" placeholder="请选择" style="width: 200px">
          <el-option label="全部" value=""/>
          <el-option label="未置顶" value="0"/>
          <el-option label="置顶" value="1"/>
        </el-select>
      </div>
      <el-pagination
          style="position: absolute;right: 0; bottom: 0"
          v-model:current-page="articleSX.currentPage"
          :size="'default'"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
      />
      <el-button type="primary" @click="getArticle">搜索</el-button>
    </div>
    <div class="mx">

      <!--      数据表格-->
      <div class="mx_table">
        <el-table :data="articles" stripe style="width: 100%" height="700px">
          <el-table-column label="文章状态" align="center" prop="status">
            <template v-slot="scope">
              <el-tag v-if="scope.row.status==='1'" type="success">
                {{ showDictUtil(scope.row.status, articleStatusDict) }}
              </el-tag>
              <el-tag v-else type="danger">{{ showDictUtil(scope.row.status, articleStatusDict) }}</el-tag>
              <!--              <span>{{  }}</span>-->
            </template>
          </el-table-column>
          <el-table-column label="标题" align="center" prop="title" width="150px">
          </el-table-column>
          <el-table-column label="点赞量" align="center" prop="like"/>
          <el-table-column label="收藏" align="center" prop="subscribe"/>
          <el-table-column label="封面" align="center" prop="pic" width="200">
            <template v-slot="scope">
              <img style="height: 120px" :src="scope.row.pic" alt="" class="cover-image"/>
              <!--        <image-preview :src="scope.row.pic" :width="50" :height="50" />-->
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center" prop="articleType">
            <template v-slot:default="scope">
              <span>{{ showDictUtil(scope.row.articleType, articleTypeDict) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="createBy"/>
          <el-table-column label="创建日期" align="center" prop="createTime">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="修改日期" align="center" prop="updateTime">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="280">
            <template #default="scope">
              <el-button v-if="scope.row.isVip === '0'" type="primary"
                         @click="articleTop(scope.row.id,'1')">置顶
              </el-button>
              <el-button v-else type="danger"
                         @click="articleTop(scope.row.id,'0')">取消置顶
              </el-button>
              <el-button v-if="scope.row.status === '1'" type="danger"
                         @click="articleBan(scope.row.id,scope.row.status)">封禁
              </el-button>
              <el-button v-else type="success" @click="articleBan(scope.row.id,scope.row.status)">解封</el-button>
              <el-button type="danger" @click="articleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {articleBanApi, deleteArticle, getArticleListAll, getArticlePages, toTopApi} from "@/api/articleApi.js";
import {parseTime} from "../../tool/utils.js";
import {getDict} from "@/api/common.js";
import {showDictUtil} from "../../tool/commonFun.js";
import {ElMessage, ElMessageBox} from "element-plus";

const total = ref(0)
const articleSX = ref({
  currentPage: 1,
  pageSize: 10,
  isVip:'',
})
const articles = ref([])//文章
const articleTypeDict = ref([])//文章类型字典
const articleStatusDict = ref([])//文章状态字典
onMounted(() => {
  initData()
})

function initData() {
  getArticle()
  getArticleDict()
}

//获取文章
function getArticle() {
  getArticleListAll(articleSX.value).then(res => {
    articles.value = res.data.articleList
    total.value = res.data.total
  })
}

//获取文章字典
function getArticleDict() {
  let data = {value: 'wz_lx'}
  getDict(data).then(res => {
    articleTypeDict.value = res.data[0].child
  })
  let articleStatus = {value: 'wz_zt'}
  getDict(articleStatus).then(res => {
    articleStatusDict.value = res.data[0].child
  })
}

//切页数
function handleCurrentChange(currentPage) {
  articleSX.value.currentPage = currentPage
  getArticle()
}

//文章封禁
function articleBan(id, status) {
  articleBanApi(id, status).then(res => {
    ElMessage({message: res.msg, type: 'success'})
    getArticle()
  })
}
//置顶文章
function articleTop(id,number) {
  let data = {
    id:id,
    isVip:number
  }
  toTopApi(data).then(res => {
    ElMessage({message: res.msg, type: 'success'})
    getArticle()
  })
}
//删除文章
function articleDelete(id) {
  ElMessageBox.confirm(
      '你确定要删除这个文章吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        let data = []
        data.push(id)
        deleteArticle(data).then(res => {
          ElMessage({message: res.msg, type: 'success'})
          getArticle()
        })
      })

}
</script>

<style scoped>
.articleManage_main {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-top: 10px;
}

.sx {
  position: relative;
  width: 98%;
  height: 100px;
  background-color: white;
  margin: 0 auto 10px auto;
  border-radius: 3px;
}

.mx {
  width: 98%;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  border-radius: 3px;
}
</style>